<template>
	<page-container :title='false'>
		<a-spin :spinning='loadingStore' slot='content'>
			<store-info-wrap :storeInfo='storeInfo' storeType='clothes' @check='getStoreInfo'></store-info-wrap>
		</a-spin>
		<div class='store-btns'>
			<a-button type='primary' class='store-btn' size='small'>订单</a-button>
			<router-link :to="{ name: 'clothesOrderexpress', query: { id: storeInfo.id, type: 'clothes' } }">
				<a-button type='primary' class='store-btn' size='small'>物流配送</a-button>
			</router-link>
			<router-link :to="{ name: 'clerkList', query: { id: storeInfo.id, type: 'clothes' } }">
				<a-button type='primary' class='store-btn' size='small'>店员管理</a-button>
			</router-link>
			<router-link :to="{ name: 'inviteUser', query: { id: storeInfo.id, type: 'clothes' } }">
				<a-button type='primary' class='store-btn' size='small'>邀请的人</a-button>
			</router-link>
			<a-button type='primary' class='store-btn' size='small' @click='$refs.stewardModal.show()'>新增乐管家</a-button>
			<a-button type='primary' class='store-btn' size='small' @click='handleRatio'>设置乐管家推荐百分比</a-button>
			<a-button type='primary' class='store-btn' size='small' @click='handleGatherRatio'>设置乐管家收衣百分比</a-button>
			<a-button type='primary' class='store-btn' size='small' @click='$refs.douyinOrder.show()'
				v-if="userInfo.type==3">查询核销用户抖音订单</a-button>
			<!-- <a-button type='primary' class='store-btn' @click='$refs.douyinVerify.show()' v-if="userInfo.type==3">抖音订单核销</a-button> -->
			<a-button type='primary' class='store-btn' size='small' @click='$refs.douyinCancel.show()'
				v-if="userInfo.type==3">抖音订单核销撤回</a-button>
			<div class='store-scan-btn'>
				<a-space>
					<router-link :to="{ name: 'clothesScanCode' }">
						<a-button type='primary' size='small'>进入扫码页面</a-button>
					</router-link>
					<a-button @click='getOrderPush' size='small' v-if='!orderPushing' type='primary'>语音提示</a-button>
					<a-button @click='getOrderPush' size='small' v-else type='danger'>语音提示中</a-button>
				</a-space>
			</div>
		</div>
		<a-card :bordered='false' style='margin-top: 24px'>
			<div class='table-operator'>
				<a-form layout='inline'>
					<!-- <template v-if='userInfo.type === 3'>
						<a-form-item>
							<a-input placeholder='输入封签码' v-model='queryParam.seal_code' />
						</a-form-item>
						<a-form-item>
							<a-button type='primary' @click='handleCode' icon='search'>封签码找订单</a-button>
						</a-form-item>
					</template> -->
					<template>
						<a-form-item>
							<a-input placeholder='请输入快递单号' v-model='express_no' />
						</a-form-item>
						<a-form-item>
							<a-button type='primary' @click='searchOrderNum' @keyup.enter='searchOrderNum' icon='search'>搜索快递单号</a-button>
						</a-form-item>
					</template>
					<a-form-item>
						<a-range-picker @change='onChange'>
							<a-icon slot='suffixIcon' type='calendar' />
						</a-range-picker>
					</a-form-item>
					<a-form-item>
						<a-input placeholder='姓名/手机号/订单号' v-model='queryParam.search' />
					</a-form-item>
					<a-form-item>
						<a-select placeholder='线上/线下' v-model='queryParam.is_offline' style='width: 200px' allowClear>
							<a-select-option :value='0'>线上</a-select-option>
							<a-select-option :value='1'>线下</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item>
						<a-select placeholder='订单状态' v-model='queryParam.is_take' allowClear style='width: 200px'>
							<a-select-option :value='key' v-for='(item,key) in isTakeList' :key='key'
								v-if="key>2">{{ item }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item>
						<a-select placeholder='是否快递' v-model='queryParam.is_express' allowClear style='width: 150px'>
							<a-select-option value='1'>发快递</a-select-option>
							<a-select-option value='0'>不发快递</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item>
						<a-button type='primary' @click='refreshTable' icon='search'>查询</a-button>
					</a-form-item>
					<a-form-item>
						<a-button type='primary' @click="handleExportXls('洗衣订单')" icon='download'>下载</a-button>
					</a-form-item>
					<a-form-item v-if='store_money'>
						销售额: ￥<span style='font-weight:bold;font-size:18px;'>{{store_money}}</span>
					</a-form-item>
				</a-form>
			</div>
			<clothes-order-table :data='loadData' ref='orderTable' />
			<douyin-verify ref="douyinVerify" />
			<douyin-order ref="douyinOrder" />
			<douyin-cancel ref="douyinCancel" />
			<steward-ratio-form ref='stewardRatioModal' @ok='getStoreInfo' />
			<steward-gather-form ref='stewardGatherModal' @ok='getStoreInfo' />
			<steward-form ref='stewardModal' />
			<audio controls='controls' src='https://crm.jialexi.top/jialexi.mp3' ref='audio'
				style='visibility: hidden'></audio>
		</a-card>
	</page-container>
</template>

<script>
	import {
		clothesOrder,
		clothesDown,
		clothesOrderPush,
		zoneBindCityLists,
		receiveExpress,
	} from '@/api/clothes'
	import {
		storeInfo
	} from '@/api/store'
	import {
		mapGetters
	} from 'vuex'
	import {
		IS_TAKE
	} from '@/mixins/orderStatus'
	import StewardRatioForm from '@/views/store/modules/stewardRatioForm'
	import StewardGatherForm from '@/views/store/modules/stewardGatherForm'
	import StewardForm from '@/views/store/modules/StewardForm'
	import clothesOrderTable from '@/components/clothesOrderTable'
	import douyinVerify from './modules/douyinVerify'
	import douyinOrder from './modules/douyinOrder'
	import douyinCancel from './modules/douyinCancel'
	import StoreInfoWrap from '@/views/store/modules/StoreInfoWrap'
	import formTableMixin from '@/mixins/formTableMixin'

	export default {
		name: 'ClothesOrder',
		mixins: [formTableMixin],
		components: {
			StewardRatioForm,
			StewardForm,
			StoreInfoWrap,
			clothesOrderTable,
			StewardGatherForm,
			douyinVerify,
			douyinOrder,
			douyinCancel
		},
		data() {
			return {
				express_no:"",// 快递单号
				queryParam: {
					search: '',
					atime: '',
					etime: '',
					is_express:'',
					seal_code: ''
				},
				// 销售额
				store_money:'',
				isTakeList: IS_TAKE,
				loadData: parameter => {
					const params = this.$route.params || {}
					console.log(params)
					const requestParameters = Object.assign({
						id: params.store_id
					}, parameter, this.queryParam)
					console.log('loadData request parameters:', requestParameters)
					return clothesOrder(requestParameters).then(res => {
						console.log('数据',res.data);
						this.store_money = res.data.store_money;
						return res.data
					})
				},
				downAction: parameter => {
					const params = {
						...parameter,
						id: (this.$route.params || {}).store_id
					}
					return clothesDown(params)
				},
				storeInfo: {},
				loadingStore: false,
				orderPushing: false ,// 语音播报状态
				
			}
		},

		created() {
			this.getStoreInfo();
			this.queryParam = localStorage.getItem('closeOrderSearch')?JSON.parse(localStorage.getItem('closeOrderSearch')):{
				search: '',
				atime: '',
				etime: '',
				seal_code: ''
			};
			var _this = this;
			document.onkeydown = function(e) {
				let key = window.event.keyCode;
				if (key == 13) {
					_this.searchOrderNum();
				}
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			// 快递单号搜索
			searchOrderNum(){
				if(this.express_no){
					receiveExpress({
						express_no:this.express_no
					}).then(res=>{
						console.log(res);
						if(res.status == 0){
							this.$router.push({
								name: 'clothesOrderDetail',
								query: {
									id: res.data
								}
							})
						}
					}).catch(err=>{
						
					})
				}
			},
			dayin(){
				console.log(1);
			},
			getOrderPush() {
				console.log(this.orderPushing);
				if (this.orderPushing) {
					clearInterval(this.timer)
					this.time = null
					this.orderPushing = false
				} else {
					this.orderPushing = true;
					this.timer = setInterval(() => {
						clothesOrderPush().then(res => {
							this.playAudio()
						})
					}, 1000 * 60)
				}
			},
			playAudio() {
				this.$refs.audio.play()
			},
			handleGatherRatio() {
				const ratioMdl = {
					id: this.storeInfo.id,
					number: this.storeInfo.tuan_ratio,
					type: 'clothes',
					mobile: this.userInfo.mobile,
					default: parseFloat(this.storeInfo.tuan_default_ratio)
				}
				this.$refs.stewardGatherModal.show(ratioMdl)
			},
			handleRatio() {
				const ratioMdl = {
					id: this.storeInfo.id,
					number: this.storeInfo.le_ratio,
					type: 'clothes',
					default: parseFloat(this.storeInfo.ratio),
					mobile: this.userInfo.mobile
				}
				this.$refs.stewardRatioModal.show(ratioMdl)
			},
			getStoreInfo() {
				this.loadingStore = true
				const params = this.$route.params
				storeInfo({
						id: params.store_id,
						type: 'clothes'
					})
					.then(res => {
						this.storeInfo = res.data
						this.loadingStore = false
					})
			},
			onChange(date, dateString) {
				console.log(date, dateString)
				this.queryParam.atime = dateString[0]
				this.queryParam.etime = dateString[1]
			},
			handleCode() {
				const sealCode = this.queryParam.seal_code
				if (!sealCode) {
					this.$message.warning('请输入封签码')
					return
				}
				this.$router.push({
					name: 'clothesOrderDetail',
					// path: '/clothes/clothes-order-detail',
					query: {
						seal_code: sealCode
					}
				})
			},
			refreshTable() {
				this.$refs.orderTable.handleSearch(true)
			}
		}
	}
</script>